<template>
  <div id="app" v-if="isRefresh">
      <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isRefresh: true
    }
  },
  methods: {
    reload () {
      this.isRefresh = false
      this.$nextTick(() => {
        this.isRefresh = true
      })
    },
  },
  watch: {
    '$route' (val) {
      if (val.meta.needRefetch) {
        this.reload()
        window.scrollTo(0, 0)
      }
    }
  },
}
</script>
<style lang="scss">
html,body{
  width: 100%;
  height: 100%;
}
#app{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #F2F2F2;
}
</style>
